<template>
  <el-table ref="alTable" v-bind="$attrs" v-on="$listeners" class="al-table">
    <el-table-column
      v-for="i in column"
      :key="i.id"
      :type="i.type"
      :index="i.index"
      :column-key="i.columnKey"
      :label="i.label"
      :prop="i.prop"
      :width="i.width"
      :min-width="i.minWidth"
      :fixed="i.fixed"
      :render-header="i.renderHeader"
      :sortable="i.sortable"
      :sort-method="i.sortMethod"
      :sort-by="i.sortBy"
      :sort-orders="i.sortOrders"
      :resizable="i.resizable"
      :formatter="i.formatter"
      :show-overflow-tooltip="
        i.showOverflowTooltip === '' ? 'true' : i.showOverflowTooltip
      "
      :align="i.align"
      :header-align="i.headerAlign"
      :class-name="i.className"
      :label-class-name="i.labelClassName"
      :selectable="i.selectable"
      :reserve-selection="i.reserveSelection"
      :filters="i.filters"
      :filter-placement="i.filterPlacement"
      :filter-multiple="i.filterMultiple"
      :filter-method="i.filterMethod"
      :filtered-value="i.filteredValue"
    >
      <template v-if="i.text" v-slot="scope">
        <div>{{ showText(scope.row, i) }}</div>
      </template>
      <template v-else-if="i.icon" v-slot="scope">
        <div v-if="i.pre"><i :class="i.icon"></i>{{ scope.row[i.prop] }}</div>
        <div v-else>{{ scope.row[i.prop] }}<i :class="i.icon"></i></div>
      </template>
      <template v-else-if="i.link" v-slot="scope">
        <div class="link" @click="goto(scope.row, i)">
          <el-link type="primary">{{ scope.row[i.prop] }}</el-link>
        </div>
      </template>
      <template v-else-if="i.img" v-slot="scope">
        <el-avatar
          :shape="i.shape"
          :fit="i.fit"
          :src="scope.row[i.prop] || defaultSrc"
        >
        </el-avatar>
      </template>
      <template v-else-if="i.unit" v-slot="scope">
        <div>{{ scope.row[i.prop] + i.unit }}</div>
      </template>
      <template v-else-if="i.slot" v-slot="scope">
        <slot :name="i.name" :row="scope.row" />
      </template>
      <template v-else-if="i.type === 'expand'" v-slot="scope">
         <slot name="expand" :row="scope.row" />
      </template>
    </el-table-column>
    <el-table-column
      :fixed="operation.fixed"
      :align="operation.align"
      v-if="buttons.length"
      label="操作"
      :width="buttons.length > 1 ? buttons.length * 80 + 'px' : '100px'"
      :min-width="operation.minWidth"
      :header-align="operation.headerAlign"
      :class-name="operation.className"
      :label-class-name="operation.labelClassName"
    >
      <template v-slot="scope">
        <slot name="rowButton" :row="scope.row">
          <div class="btns" v-for="i in buttons" :key="i.id">
            <slot v-if="i.type === 'slot'" :name="i.name" :row="scope.row" />
            <el-button
              v-else
              :type="i.type"
              :plain="i.plain"
              :loading="scope.row === active ? i.loading : false"
              :disabled="disabledMethods(scope.row, i)"
              @click="clickMethods(scope, i.method, i)"
              >{{ i.name }}
            </el-button>
          </div>
        </slot>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  props: {
    otherParams: {
      type: Object,
      default() {
        return {};
      },
    },
    // 表格的需要显示的数据列
    column: {
      type: Array,
      default() {
        return [];
      },
    },
    // 需要对表格的行进行操作的按钮
    operation: {
      type: Object,
      default() {
        return {};
      },
    },
    buttons: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  data() {
    return {
      active: {},
      defaultSrc:
        "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",
    };
  },
  methods: {
    showText(row, i) {
      const arr = i.prop.split(".");
      if (arr.length === 1) {
        return i.text[`${row[i.prop]}`];
      } else {
        let result = row;
        for (let j = 0; j < arr.length; j++) {
          result = result[arr[j]];
        }
        return i.text[result];
      }
    },
    goto(row, i) {
      const link = i.link;
      const paramsList = i.paramsList || [];
      let params = "?";
      const otherParams = this.otherParams;
      const otherParamsArr = Object.keys(otherParams);
      if (otherParamsArr.length) {
        otherParamsArr.forEach((val, index) => {
          params += `${val}=${otherParams[val]}&`;
        });
      }
      paramsList.forEach((val, index) => {
        params += `${paramsList[index]}=${row[val]}`;
        if (paramsList.length !== index + 1) {
          params += "&";
        }
      });
      let href = "/" + link;
      if (params.length > 1) {
        href += params;
      }
      i.target === "self"
        ? this.$router.push(href)
        : window.open(href, "_blank");
    },
    clickMethods(scope, back, i) {
      this.$emit(back, scope, i);
      this.active = scope.row;
    },
    disabledMethods(row, i) {
      if (i.disabled) {
        const disabled = i.disabled;
        const arr = Object.keys(disabled);
        if (disabled && arr.length) {
          let flog = true;
          for (const j of arr) {
            if (i.disabled[j].includes(row[j])) {
              flog = false;
              break;
            }
          }
          return flog;
        } else {
          return false;
        }
      } else {
        return false;
      }
    },
  },
};
</script>

<style scoped>
.al-table {
  background-color: #fff;
  width: 100%;
  overflow: hidden;
}

.al-table .el-table {
  width: 100%;
  height: 100%;
  overflow: auto;
}

.al-table .btns {
  display: inline-block;
}

.al-table ::v-deep img {
  width: 100%;
}

.el-table .btns .el-button {
  margin-right: 5px;
}
</style>